<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的银行卡</block>
		</cu-custom>
		<view class="margin" >
			<navigator
				:url="`/pages/my/setting/addBank?type=${item.Type}&id=` + item.ID"
				class="qui-cell bg-box mb15"
				v-for="item in BankList"
				:style="`background-image:url(${imgurl}` + bindBgUrl(item.Type, item.BankName) + ')'"
			>
				<view class="cell-hd"><image :src="imgurl + BindURL(item.Type, item.BankName)" mode="" class="img75" style="vertical-align: bottom;"></image></view>
				<view class="cell-bd text-white">
					<view class="fs30" v-text="item.BankName"></view>
					<view class="fs22" v-text="item.Name"></view>
				</view>
				<view class="cell-ft">
					<text class="fs40 text-white">{{ item.Type == 4 ? item.BankNo.substring(item.BankNo.length - 4, item.BankNo.length) : item.BankNo }}</text>
				</view>
			</navigator>
		</view>
		<view class="uni-btns_fixed-bottom ptb10">
			<view url="/pages/my/setting/editAddress?act=add" class="uni-btn flex align-center justify-center">
				<image :src="imgurl + 'icon_add.png'" mode="" class="img30"></image>
				<text class="fs28 fw600 ml10" @tap="addPopup = true">添加银行卡</text>
			</view>
		</view>
		<uni-popup type="bottom" :show="addPopup">
			<view>
				<view class="margin">
					<view class="qui-cells radius10">
						<navigator url="/pages/my/setting/addBank?type=2&id=0" class="qui-cell" @tap="addPopup = false">
							<view class="cell-bd"><text class="fs28 fw600">微信</text></view>
						</navigator>
						<navigator url="/pages/my/setting/addBank?type=1&id=0" class="qui-cell" @tap="addPopup = false">
							<view class="cell-bd"><text class="fs28 fw600">支付宝</text></view>
						</navigator>
						<navigator url="/pages/my/setting/addBank?type=4&id=0" class="qui-cell" @tap="addPopup = false">
							<view class="cell-bd"><text class="fs28 fw600">银联卡</text></view>
						</navigator>
					</view>
				</view>
				<view class="cu-btn lg bg-white fw600" style="width: 100%;font-size: 28upx;height: 95upx;" @tap="addPopup = false">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import UniPopup from '@/common/components/uni-popup.vue';
import base from 'utils/base.js';

export default {
	components: {
		UniPopup
	},
	data() {
		return {
			addPopup: false,
			imgurl: this.$imgurl,
			BankList: [],
			list: [
				{
					name: '招商银行',
					icon: 'icon_bank_11.png',
					number: '6225 **** 8801',
					backgroundImg: 'bg_bank_1.png',
					type: 'bank'
				},
				{
					name: '中国工商银行',
					icon: 'icon_bank_22.png',
					number: '6225 **** 8801',
					backgroundImg: 'bg_bank_2.png',
					type: 'bank'
				},
				{
					name: '支付宝',
					icon: 'icon_bank_33.png',
					number: '6225 **** 8801',
					backgroundImg: 'bg_bank_3.png',
					type: 'alipay'
				},
				{
					name: '微信',
					icon: 'icon_bank_44.png',
					number: '6225 **** 8801',
					backgroundImg: 'bg_bank_4.png',
					type: 'wechat'
				}
			]
		};
	},
	onShow: function() {
	
		let time = 0;
			let globalData = getApp().globalData;
		let current = this;
		let si = setInterval(function() {
			time = time + 1;
			if (globalData.ticket) {
				current.GetBankList();
				clearInterval(si);
			}
			if (time > 40) clearInterval(si);
		}, 200);
		
	},
	methods: {
		BindURL: function(type,bankname) {
			if (type == 1) return 'icon_bank_33.png';
			else if (type == 2) return 'icon_bank_44.png';
			else if (type == 4) 
			{
				if (bankname == '工商银行') return 'icon_bank_22.png';
				if (bankname == '建设银行') return 'icon_bank_55.png';
				if (bankname == '中国银行') return 'icon_bank_77.png';
				if (bankname == '农业银行') return 'icon_bank_66.png';
				if (bankname == '招商银行') return 'icon_bank_11.png';
			}
		},
		bindBgUrl: function(type, bankname) {
			if (type == 1) return 'bg_bank_3.png';
			else if (type == 2) return 'bg_bank_4.png';
			else if (type == 4) {
				if (bankname == '工商银行') return 'bg_bank_2.png';
				if (bankname == '建设银行') return 'bg_bank_5.png';
				if (bankname == '中国银行') return 'bg_bank_7.png';
				if (bankname == '农业银行') return 'bg_bank_6.png';
				if (bankname == '招商银行') return 'bg_bank_1.png';
			
			}
		},
		GetBankList: function() {
			let currentPage = this;
			let params = {
				hideLoading: true,
				type: 'GET',
				url: '/api/Withdrawals/GetUserBanksList',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let bankList = response.Data;
						currentPage.BankList = bankList;
					}
				}
			};
			base.request(params);
		}
	},
	mounted() {}
};
</script>

<style lang="scss" scoped>
.bg-box {
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}
</style>
